<template>
  <div>
    <div>OrbitControls旋转缩放限制</div>
    <div ref="webgl"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  let scene: any = null;
  let camera: any = null;
  let render: any = null;
  let controls: OrbitControls;
  onMounted(() => {
    init();
  });
  function init() {
    scene = new THREE.Scene();
    // 正投影相机
    const width = window.innerWidth; //canvas画布宽度
    const height = window.innerHeight; //canvas画布高度

    camera = new THREE.PerspectiveCamera(90, width / height, 1, 1000);
    camera.position.set(300, 300, 300);
    camera.lookAt(scene.position);
    render = new THREE.WebGLRenderer();
    // 背景颜色
    render.setClearColor('#f1f2f6');
    render.setSize(width, height);
    webgl.value.appendChild(render.domElement);
    controls = new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);
    const pointLight = new THREE.PointLight(0xffffff);
    pointLight.position.set(100, 100, 100);
    scene.add(pointLight);
    const pointLightHelper = new THREE.PointLightHelper(pointLight);
    scene.add(pointLightHelper);
    // controls.enablePan = false; //禁止右键拖拽
    // controls.enableZoom = false; //禁止缩放
    // controls.enableRotate = false; //禁止旋转
    //相机位置与观察目标点最小值
    // controls.minDistance = 200;
    //相机位置与观察目标点最大值
    // controls.maxDistance = 500;
    // 上下旋转范围
    controls.minPolarAngle = 0; //默认值0
    controls.maxPolarAngle = Math.PI; //默认值Math.PI
    // 左右旋转范围
    controls.minAzimuthAngle = 0;
    controls.maxAzimuthAngle = Math.PI / 2;

    renderFun();
  }

  function renderFun() {
    controls.update();
    // controls.update(); //update()函数内会执行camera.lookAt(controls.target)
    render.render(scene, camera);
    requestAnimationFrame(renderFun);
  }
</script>
<style lang=""></style>
